<template>
	<view class="container">
		<u-toast ref="uToast"></u-toast>
		<view class="bg">
			<view class="image">
				<u--image :showLoading="true"
					src="https://img.alicdn.com/imgextra/i3/2064565174/O1CN01la9p171o5k3AezYer_!!2064565174.png"
					width="580rpx" height="580rpx" mode="widthFix"></u--image>
			</view>
		</view>
		<view class="form">
			<view class="tips">
				<view class="text">登录后享受更多精彩内容</view>
			</view>
			<view class="btn-group">
				<view class="btn">
					<u-button @click="doLogin" color="linear-gradient(180deg, #f56c6c 0%, #e45656 100%)" shape="circle"
						text="立即授权操作"></u-button>
				</view>
				<view class="btn" v-on:click="onBackPage">
					<u-button shape="circle" text="暂不登录"></u-button>
				</view>
			</view>
		</view>
		<!-- 补充头像 -->
		<view class="popup">
			<u-popup overlayOpacity="0.9" mode="top" round="5" :show="is_popup">
				<form @submit="formSubmit" catchreset="formReset">
					<view class="content">
						<button v-if="!form.avatar_id" class="btn-normal" open-type="chooseAvatar"
							@chooseavatar="onChooseAvatar">
							<image class="avatar-default" :src="avatarUrl"></image>
						</button>
						<button v-else class="btn-normal" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<image class="avatar" :src="avatarUrl"></image>
						</button>
						<view class="nickname">
							<u--form>
								<u-form-item label="昵称">
									<input type="nickname" name="nickname" placeholder="请输入昵称" />
								</u-form-item>
							</u--form>
						</view>
						<view class="login-tips">
							<view class="text">99%+的用户寻则使用微信头像和昵称，方便快捷。</view>
						</view>
						<view class="btn-group"><button class="btn" style="margin: 30rpx 0" type="primary"
								formType="submit">确认授权登录</button></view>
					</view>
				</form>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import siteinfo from '@/siteinfo.js';
	import {
		login,
		detail,
		modify
	} from '@/api/user.js';
	import {
		upload
	} from '@/api/system.js';
	export default {
		data() {
			return {
				avatarUrl: 'https://img.alicdn.com/imgextra/i1/2064565174/O1CN014r6Fi21o5k2K1ME0P_!!2064565174.png',
				is_popup: false,
				form: {
					avatar_id: '',
					nickName: ''
				}
			};
		},
		methods: {
			formSubmit(e) {
				this.form.nickName = e.detail.value.nickname;
				this.onModify();
			},
			onModify() {
				let _this = this;
				if (!this.form.avatar_id) {
					uni.showToast({
						icon: 'error',
						title: '头像不能为空'
					})
					return false;
				}
				if (!this.form.nickName) {
					uni.showToast({
						icon: 'error',
						title: '昵称不能为空'
					})
					return false;
				}
				this.is_popup = false;
				modify(this.form)
					.then(res => {
						if (res.code == 1) {
							_this.$refs.uToast.show({
								type: 'success',
								message: '登录成功',
								complete() {
									uni.navigateBack({});
								}
							});
						}
					})
					.catch(err => {});
			},
			onChooseAvatar(e) {
				this.avatarUrl = e.detail.avatarUrl;
				this.afterRead(this.avatarUrl);
			},
			onBackPage() {
				uni.navigateBack();
			},
			getUser() {
				let _this = this;
				detail({})
					.then(res => {
						_this.userInfo = res.data.userInfo;
						if (!_this.userInfo.avatar_id) {
							_this.is_popup = true;
						} else {
							uni.navigateBack({});
						}
					})
					.catch(err => {});
			},
			doLogin(e) {
				let _this = this;
				uni.showLoading({})
				uni.getUserProfile({
					desc: '获得您的公开信息',
					success: result => {
						wx.login({
							success: res => {
								login({
										referee_id: uni.getStorageSync('referee_id'),
										code: res.code,
										user_info: JSON.stringify(result.userInfo)
									})
									.then(ls => {
										uni.setStorageSync('token', ls.data.token);
										uni.setStorageSync('user_id', ls.data.user_id);
										_this.$refs.uToast.show({
											type: 'success',
											message: '授权成功',
											complete() {
												uni.hideLoading()
												_this.getUser();
											}
										});
									})
									.catch(err => {
										uni.hideLoading()
										console.log(err);
									});
							},
							fail() {
								uni.hideLoading()
							}
						});
					},
					fail: err => {
						console.log(err);
						uni.hideLoading()
					}
				});
			},
			async afterRead(file_path) {
				let result = await upload({
					file: file_path
				}).then(result => {
					return result;
				}).catch(err => {

				})
				this.form.avatar_id = result.file_id;
			}
		}
	};
</script>

<style lang="scss">
	.popup {
		.content {
			background-color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 60rpx 30rpx;
			border-radius: 30rpx;
			padding-bottom: 20rpx;

			.login-tips {
				.text {
					font-size: 18rpx;
					background-color: #f3f4f6;
					padding: 10rpx 15rpx;
					border-radius: 15rpx;
					color: #909399;
				}
			}

			.avatar {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
			}

			.avatar-default {
				width: 140rpx;
				height: 140rpx;
			}

			.nickname {
				margin-top: 30rpx;

				input {
					border-bottom: 3rpx solid #f4f4f5;
					padding-bottom: 15rpx;
				}
			}

			.btn-group {
				width: 50%;
				margin-top: 15rpx;

				button[type='primary'] {
					background: linear-gradient(180deg, #f56c6c 0%, #e45656 100%) !important;
					border-radius: 60rpx;
					font-size: 24rpx;
					padding: 10rpx 15rpx;
				}
			}
		}
	}

	.form {
		width: 80%;
		margin: 30rpx auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.tips {
			margin: 30rpx 0rpx;
			color: #999;
		}

		.btn-group {
			width: 100%;

			.btn {
				margin-bottom: 15rpx;

				.u-button {
					height: 100rpx;
				}
			}
		}
	}

	.bg {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 120rpx;
	}
</style>
